<html>

<head>
    <title>景点介绍1.0</title>
    <style>
        .itembg {
            position: absolute;
            top: 0px;
            width: 300px;
            height: 150px;
            z-index: 10;

        }

        .itembg img {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 177px;
        }

        .itemtext {
            position: absolute;
            left: 0;
            bottom: 0px;
            width: 100%;
            height: 150px;
            line-height: 150px;
            vertical-align: middle;
            text-align: center;
            color: #ffffff;
            font-size: 45px;
        }
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body style="width: 1920px; 
height: 1080px;
margin:0px;
background-color: #4a4a4a" onload="init()">

    <div class="main" style="width: 1920px;
    height: 1080px;
    overflow: hidden;">
        <!--背景内容-->
        <div style="display: flex;" class="content_image" id="imgParent">
        </div>
        <div style=" position: absolute;padding: 20px; top: 0px; bottom: 150px; left: 0px; width: 440px; height: 890px;font-size:30px;color:#fff;background-color:  rgba(0, 0, 0, 0.5); "
            id="itemTextIntro">

        </div>
        <!--下面内容-->
        <div
            style=" position: absolute; top: 930px; left: 0px; width: 1920px; height: 150px; z-index: 15;background-color: rgba(0, 0, 0, 0.5); ">
            


            <!--焦点-->
            <div id="focusobj" style="position: absolute;top: 0px;left: 108px;width: 323px;height: 150px;background-image: url('../image/hotel_focus.png');background-repeat: no-repeat;  
                background-size: cover;  
                background-position: center; z-index: -1;">
            </div>
            <!--栏目条-->
            <div style=" position: absolute; top: 0px; left:98px; width: 1725px; height: 150px; ">

                <div style="left: 23px;" class="itembg" id="itembg0">
                    <div class="itemtext" id="itemtext0">

                    </div>
                </div>

                <div style="left: 368px;" class="itembg" id="itembg1">
                    <div class="itemtext" id="itemtext1">

                    </div>
                </div>

                <div style="left: 713px;" class="itembg" id="itembg2">
                    <div class="itemtext" id="itemtext2">

                    </div>
                </div>

                <div style="left: 1058px;" class="itembg" id="itembg3">
                    <div class="itemtext" id="itemtext3">

                    </div>
                </div>

                <div style="left: 1403px;" class="itembg" id="itembg4">
                    <div class="itemtext" id="itemtext4">

                    </div>
                </div>


                <div style=" position: absolute; bottom:200px;padding-left: 30px;padding-right:20px;  right: -60px; width: 60px; height: 30px; color: #fff; font-size: 30px;background-color: rgba(0, 0, 0, 0.5);border-radius: 15px;line-height: 30px;"
                    id="page">

                </div>
            </div>

        </div>

    </div>
</body>
<script src="../config/index.js"></script>
<script src="../js/config.js"></script>
<script type="text/javascript">
    document.onkeydown = function (event) {
        if (event.code == "ArrowRight") {
            changelist(1);
        }
        if (event.code == "ArrowLeft") {
            changelist(-1);
        }
        if (event.code == "Backspace") {
            doBack();
        }
    }

    var menulist = [];
    function init() {
        if (allConfig.hotelInfo) {
            if (allConfig.hotelInfo.main) {
                menulist = allConfig.hotelInfo.main;
                init_menu()
                init_item();
            }
        }
    }

    var langbox = {
        distance: 345,
        leftPosition: 0,
        localPosition: 0
    };

    var imagebox = {
        distance: 1920,
        leftPosition: 0,
        localPosition: 0
    };

    // 菜单初始化
    function init_menu() {
        for (var k = 0; k < menulist.length; k++) {
            var title = menulist[k].title.content;
            document.getElementById("itemtext" + k).innerHTML = title;
        }

        // 设置焦点初始位置
        document.getElementById('focusobj').style.transform = "translateX(0)"
        langbox.localPosition = 0
        langbox.leftPosition = 0
    }


    function init_item() {
        if (menulist.length == 0) return false;
        // 获取div元素  
        const divParent = document.getElementById('imgParent');
        divParent.style.height = "100%"
        divParent.style.width = menulist.length * 1920 + "px"
        for (var j = 0; j < menulist.length; j++) {
            // 创建一个新的img元素  
            const img = document.createElement('img');
            // 设置img的源  
            img.src = menulist[j].intro.content[0].url; // 替换为你的图片URL
            // 设置img的样式  
            img.style.width = "1920px"; // 设置宽度  
            img.style.height = '1080px'; // 设置高度  
            // position: absolute;left: 0px;top:0px;display: none; 
            img.id = "imageobj" + j
            // 将img添加到div中  
            divParent.appendChild(img);
        }
        document.getElementById("itemTextIntro").innerHTML = menulist[langbox.leftPosition].title.text
        
    }


    function changelist(num) {
        if (menulist.length <= 1) return false;
        if ((langbox.leftPosition == (menulist.length - 1)) && num == 1) {
            return
        }
        if (langbox.leftPosition == 0 && num == -1) {
            return
        }
        document.getElementById('focusobj').style.transform = "translateX(" + (langbox.localPosition + langbox.distance * num) + "px)";
        langbox.leftPosition = langbox.leftPosition + num;
        langbox.localPosition = langbox.localPosition + langbox.distance * num;
        document.getElementById('imgParent').style.transform = "translateX(" + "-" + (imagebox.localPosition + imagebox.distance * num) + "px" + ")";
        imagebox.leftPosition = imagebox.leftPosition + num;
        imagebox.localPosition = imagebox.localPosition + imagebox.distance * num;
        document.getElementById("page").innerHTML = (itembox.position + 1) + "/" + menulist.length;



    }


    function doBack() {
        window.location.href = "../app.html";
    }


</script>

</html>